<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影管理 - 电影网站</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/admin">后台管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/movies">电影管理</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">返回前台</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div class="d-flex">
                <form class="d-flex me-3" action="/admin/movies" method="get">
                    <input class="form-control me-2" type="search" name="title" th:value="${title}" placeholder="搜索电影名称">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </form>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#movieModal">添加电影</button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>封面</th>
                            <th>标题</th>
                            <th>分类</th>
                            <th>评分</th>
                            <th>播放次数</th>
                            <th>是否VIP</th>
                            <th>上映时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="movie : ${movies}">
                            <td th:text="${movie.id}"></td>
                            <td>
                                <img th:src="${movie.coverUrl}" alt="封面" style="height: 50px;">
                            </td>
                            <td th:text="${movie.name}"></td>
                            <td th:each="category : ${movie.categories}" th:text="${category} "></td>
                            <td th:text="${movie.score}"></td>
                            <td th:text="${movie.playCount}"></td>
                            <td>
                                <span class="badge bg-success" th:if="${movie.isVip}">是</span>
                                <span class="badge bg-secondary" th:if="${!movie.isVip}">否</span>
                            </td>
                            <td th:text="${#dates.format(movie.releaseDate, 'yyyy-MM-dd')}"></td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary me-1" 
                                        th:onclick="'editMovie(' + ${movie.id} + ')'">编辑</button>
                                <button class="btn btn-sm btn-outline-danger"
                                        th:onclick="'deleteMovie(' + ${movie.id} + ')'">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <nav>
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                        <a class="page-link" th:href="@{'/admin/movies?pageNo=' + ${currentPage - 1} + '&title=' + ${title}}">上一页</a>
                    </li>
                    <li class="page-item" th:each="i : ${#numbers.sequence(1, pageCount)}" th:classappend="${i == currentPage ? 'active' : ''}">
                        <a class="page-link" th:href="@{'/admin/movies?pageNo=' + ${i} + '&title=' + ${title}}" th:text="${i}"></a>
                    </li>
                    <li class="page-item" th:classappend="${currentPage == pageCount ? 'disabled' : ''}">
                        <a class="page-link" th:href="@{'/admin/movies?pageNo=' + ${currentPage + 1} + '&title=' + ${title}}">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 电影表单模态框 -->
<div class="modal fade" id="movieModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="movieModalTitle">添加电影</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="movieForm">
                    <input type="hidden" id="movieId" name="id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="title" class="form-label">电影标题</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="category" class="form-label">分类</label>
                            <!-- 修改为多选输入框 -->
                            <select class="form-select" id="category" name="categoryIds" multiple required>
                                <option th:each="cat : ${allCategories}" 
                                        th:value="${cat.id}" 
                                        th:text="${cat.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="cover" class="form-label">封面URL</label>
                            <input type="url" class="form-control" id="cover" name="cover" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="videoUrl" class="form-label">视频URL</label>
                            <input type="url" class="form-control" id="videoUrl" name="videoUrl" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="director" class="form-label">导演</label>
                            <input type="text" class="form-control" id="director" name="director" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="actors" class="form-label">主演</label>
                            <input type="text" class="form-control" id="actors" name="actors" required>
                            <div class="form-text">多个主演用逗号分隔</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="releaseDate" class="form-label">上映时间</label>
                            <input type="date" class="form-control" id="releaseDate" name="releaseDate" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="rating" class="form-label">评分</label>
                            <input type="number" class="form-control" id="rating" name="rating" min="0" max="10" step="0.1" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">简介</label>
                        <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="isVip" name="isVip">
                        <label class="form-check-label" for="isVip">VIP专享</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveMovie()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
function editMovie(id) {
    // 获取电影信息并填充表单
    $.get('/admin/movie/' + id, function(movie) {
        $('#movieId').val(movie.id);
        $('#title').val(movie.name);
        // 设置分类 - 使用关联的分类ID列表
        $('#category').val(movie.categoryIds.join(','));
        $('#cover').val(movie.coverUrl);
        $('#videoUrl').val(movie.videoUrl);
        $('#director').val(movie.director);
        $('#actors').val(movie.actors.join(','));
        $('#releaseDate').val(movie.releaseDate);
        $('#rating').val(movie.score);
        $('#description').val(movie.description);
        $('#isVip').prop('checked', movie.isVip);
        
        $('#movieModalTitle').text('编辑电影');
        $('#movieModal').modal('show');
    });
}

function saveMovie() {
    var formData = new FormData($('#movieForm')[0]);
    
    $.ajax({
        url: '/admin/movie/save',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response === '保存成功') {
                location.reload();
            } else {
                alert(response);
            }
        },
        error: function() {
            alert('保存失败，请稍后重试');
        }
    });
}

function deleteMovie(id) {
    if (confirm('确定要删除这部电影吗？')) {
        $.post('/admin/movie/delete', { id: id }, function(response) {
            if (response === '删除成功') {
                location.reload();
            } else {
                alert(response);
            }
        });
    }
}

// 清空表单
$('#movieModal').on('hidden.bs.modal', function() {
    $('#movieForm')[0].reset();
    $('#movieId').val('');
    $('#movieModalTitle').text('添加电影');
});
</script>
</body>
</html>